.ellipsis-basic{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis(@substract:0){
    .ellipsis-basic();
    width: 100% - @substract;
}
.ellipsis-multi(@line:2){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:@line;
    overflow: hidden;
}

.triangle (top,@w:5px,@color:#ccc){
  border-style:solid dashed dashed dashed;
  border-color:@color transparent transparent transparent;
  border-width:@w;
}
.triangle (right,@w:5px,@color:#ccc){
  border-style:dashed solid dashed dashed;
  border-color:transparent @color transparent transparent;
  border-width:@w;
}
.triangle (bottom,@w:5px,@color:#ccc){
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent @color transparent;
  border-width:@w;
}
.triangle (left,@w:5px,@color:#ccc){
  border-style:dashed dashed dashed solid;
  border-color:transparent transparent transparent @color;
  border-width:@w;
}
.triangle (@_,@w:5px,@color:#ccc){
  .triangle-compatible();
}
//边框附加内容
.triangle-compatible()
{
    width: 0; height: 0; overflow:hidden;
}
//单独方向
.triangle-b(@w:5px,@color:#ccc){
  border-style:solid dashed dashed dashed;
  border-color:@color transparent transparent transparent;
  border-width:@w;
  .triangle-compatible();
}
.triangle-l(@w:5px,@color:#ccc){
  border-style:dashed solid dashed dashed;
  border-color:transparent @color transparent transparent;
  border-width:@w;
  .triangle-compatible();
}
.triangle-t(@w:5px,@color:#ccc){
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent @color transparent;
  border-width:@w;
  .triangle-compatible();
}
.triangle-r(@w:5px,@color:#ccc){
  border-style:dashed dashed dashed solid;
  border-color:transparent transparent transparent @color;
  border-width:@w;
  .triangle-compatible();
}



.slide{
  
.slideBox {
  width: 6.6rem;
  height: 3rem;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
}

.slideBox .hd {
  position: absolute;
  right:0;
  top:0;
  z-index: 100;
  width:.6rem;
  height:3rem;
  background:#222;
}

.slideBox .hd ul {
  display: flex;
  flex-direction: column;


  height:100%;

}

.slideBox .hd ul li {
  position: relative;
  flex:1;
  height:.4rem;
  line-height: .4rem;
  margin:.05rem 0;
  text-align: center;
  color:white;
  cursor:pointer;

}

.slideBox .hd ul li.on {
  background: #ed4040;
  color: #fff;
}

.slideBox .hd ul li.on::before{
  content:'';
  position: absolute;
  top:50%;
  left:-.1rem;
  width:0;
  height:0;
  margin-top:-.05rem;
  .triangle(right,.05rem,#ed4040);
}

.slideBox .bd {
  position: relative;
  height: 100%;
  z-index: 0;
}

.slideBox .bd li {
  zoom: 1;
  vertical-align: middle;
}
.slideBox .bd li a{
  position: relative;
  display:block;
  height:100%;
}

.slideBox .bd ul li a div.title{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height:.45rem;
  line-height: .45rem;
  color:#ed4040;
  font-size:.2rem;
  font-weight:bold;
  text-indent:.3rem;
  .ellipsis(10) ;
}

.slideBox .bd img {
  width: 6.6rem;
  height: 3rem;
  display: block;
} 

}